<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style type="text/css">
    * {
        box-sizing: border-box;
    }

    .floatLayout > div{
        float: left;
    }

    .floatLayout:after{
        display:table;
        content:" ";
        clear:both;
    }

    .inlineLayout >div{
        display: inline-block;
    }

    .part1 {
        border: 1px solid red;
        height: 100px;
        width: 50%;
    }

    .part1_1 {
        border: 1px solid red;
        height: 50px;
        width: 30%;
    }

    .part1_2 {
        border: 1px solid red;
        height: 50px;
        width: 30%;
    }
</style>

<h3>为什么说float更适合布局</h3>
<hr/>

<div class="floatLayout">
    <h3>floatLayout</h3>
    <div class="part1">part1</div>
    <div class="part1_1">part1_1</div>
    <div class="part1_2">part1_2</div>
</div>


<hr/>
<div class="inlineLayout">
    <h3>inlineLayout</h3>
    <div class="part1">part1</div>
    <div class="part1_1">part1_1</div>
    <div class="part1_2">part1_2</div>
</div>
</body>
</html>